<template>
  <div class="student-container">
    <div class="filter-section">
      <el-select
          v-model="select.collegeId"
          placeholder="选择学院"
          size="large"
          @change="getStudent"
      >
        <el-option
            v-for="item in college"
            :key="item.collegeName"
            :label="item.collegeName"
            :value="item.id"
        />
        <el-option
            key="全部"
            label="全部"
            value=""
        />
      </el-select>

      <el-select
          v-model="select.classId"
          placeholder="选择班级"
          size="large"
          @change="getStudent"
          v-if="role.includes('主任') || role.includes('院长')"
      >
        <el-option
            v-for="item in classes"
            :key="item.className"
            :label="item.className"
            :value="item.id"
        />
        <el-option
            key="全部"
            label="全部"
            value=""
        />
      </el-select>

      <el-select
          v-model="select.sex"
          placeholder="选择性别"
          size="large"
          @change="getStudent"
      >
        <el-option
            key="男"
            label="男"
            value=1
        />
        <el-option
            key="女"
            label="女"
            value=0
        />
        <el-option
            key="全部"
            label="全部"
            value=""
        />
      </el-select>

      <el-input 
        v-model="select.name" 
        placeholder="搜索学生姓名" 
        size="large"
        @change="getStudent"
        clearable
      />
    </div>

    <el-table 
      :data="studentList" 
      style="width: 100%"
      :header-cell-style="{
        background: '#f5f7fa',
        color: '#606266'
      }"
    >
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="name" label="学生姓名" min-width="120" align="center"/>
      <el-table-column label="性别" width="80" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.sex === 1 ? 'primary' : 'success'" effect="light">
            {{ scope.row.sex === 1 ? '男' : '女' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="学院" min-width="150" align="center">
        <template #default="scope">
          {{scope.row.tbCollege.collegeName}}
        </template>
      </el-table-column>
      <el-table-column label="班级" min-width="150" align="center">
        <template #default="scope">
          <span>{{scope.row.tbClass.className}}</span>
        </template>
      </el-table-column>
      <el-table-column label="导员" min-width="120" align="center">
        <template #default="scope">
          <span>{{scope.row.tbCounselor.counselorName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="讲师" min-width="120" align="center">
        <template #default="scope">
          <span>{{scope.row.tbTeacher.teacherName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="natives" label="籍贯" min-width="120" align="center" />
      <el-table-column prop="points" label="综合积分" width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.points >= 0 ? 'success' : 'danger'" effect="light">
            {{ scope.row.points }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="280" align="center">
        <template #default="scope">
          <div class="operation-buttons">
            <el-button type="primary" @click="jia(scope.row.id, scope.row.name)" size="small">
              <el-icon><Plus /></el-icon>加分
            </el-button>
            <el-button type="danger" @click="jian(scope.row.id, scope.row.name)" size="small">
              <el-icon><Minus /></el-icon>减分
            </el-button>
            <el-button @click="upd" size="small">
              <el-icon><Edit /></el-icon>编辑
            </el-button>
            <el-button type="danger" @click="del" size="small">
              <el-icon><Delete /></el-icon>删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        v-model="dialogVisible"
        title="加分"
        width="500px"
        destroy-on-close
    >
      <div class="dialog-form">
        <el-input v-model="log.studentName" disabled placeholder="学生姓名" />
        <el-input-number 
          v-model="score" 
          :min="1" 
          :max="100"
          class="score-input"
          placeholder="分数"
        />
        <el-input 
          v-model="log.name" 
          type="textarea"
          :rows="3"
          placeholder="请输入加分备注"
          class="remark-input"
        />
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit" :loading="isSubmitting">确认</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog
        v-model="dialogVisible2"
        title="减分"
        width="500px"
        destroy-on-close
    >
      <div class="dialog-form">
        <el-input v-model="log.studentName" disabled placeholder="学生姓名" />
        <el-input-number 
          v-model="score" 
          :min="1" 
          :max="100"
          class="score-input"
          placeholder="分数"
        />
        <el-input 
          v-model="log.name" 
          type="textarea"
          :rows="3"
          placeholder="请输入减分备注"
          class="remark-input"
        />
        <div class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="onSubmit2" :loading="isSubmitting">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { addLog, findStudent, jiafen, jianfen } from "@/assets/student.js"
import { findClass } from "@/assets/class.js"
import { findCollege } from "@/assets/college.js"
import { Plus, Minus, Edit, Delete } from '@element-plus/icons-vue'

const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const score = ref(1)
const sid = ref()
const isSubmitting = ref(false)

const log = ref({
  name: "",
  studentName: ""
})

function jia(id, name) {
  dialogVisible.value = true
  sid.value = id
  log.value.studentName = name
  score.value = 1
}

function jian(id, name) {
  dialogVisible2.value = true
  sid.value = id
  log.value.studentName = name
  score.value = 1
}

async function onSubmit() {
  if (!log.value.name) {
    ElMessage.warning('请输入加分备注')
    return
  }
  
  isSubmitting.value = true
  try {
    await jiafen(sid.value, score.value)
    await addLog(log.value)
    ElMessage.success('加分成功')
    log.value.name = ""
    dialogVisible.value = false
    score.value = 1
    getStudent()
  } catch (error) {
    ElMessage.error('操作失败，请重试')
  } finally {
    isSubmitting.value = false
  }
}

async function onSubmit2() {
  if (!log.value.name) {
    ElMessage.warning('请输入减分备注')
    return
  }

  isSubmitting.value = true
  try {
    await jianfen(sid.value, score.value)
    await addLog(log.value)
    ElMessage.success('减分成功')
    log.value.name = ""
    dialogVisible2.value = false
    score.value = 1
    getStudent()
  } catch (error) {
    ElMessage.error('操作失败，请重试')
  } finally {
    isSubmitting.value = false
  }
}

const role = localStorage.getItem("role")
const college = ref([])
const classes = ref([])

async function getClass() {
  try {
    const res = await findClass()
    classes.value = res.data.data
  } catch (error) {
    ElMessage.error('获取班级信息失败')
  }
}

async function getCollege() {
  try {
    const res = await findCollege()
    college.value = res.data.data
  } catch (error) {
    ElMessage.error('获取学院信息失败')
  }
}

const studentList = ref([])
const select = ref({
  sex: "",
  classId: localStorage.getItem("classId"),
  collegeId: "",
  name: ""
})

async function getStudent() {
  try {
    const res = await findStudent(select.value)
    studentList.value = res.data.data
  } catch (error) {
    ElMessage.error('获取学生信息失败')
  }
}

onMounted(() => {
  getClass()
  getCollege()
  getStudent()
})
</script>

<style scoped>
.student-container {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
}

.filter-section {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: center;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

:deep(.el-select) {
  .el-input__wrapper {
    border-radius: 8px;
    box-shadow: 0 0 0 1px #dcdfe6;
    transition: all 0.3s ease;
  }

  .el-input__wrapper:hover {
    box-shadow: 0 0 0 1px #409EFF;
  }

  .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px #409EFF, 0 0 0 3px rgba(64, 158, 255, 0.1);
  }
}

:deep(.el-input) {
  .el-input__wrapper {
    border-radius: 8px;
    box-shadow: 0 0 0 1px #dcdfe6;
    transition: all 0.3s ease;
  }

  .el-input__wrapper:hover {
    box-shadow: 0 0 0 1px #409EFF;
  }

  .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px #409EFF, 0 0 0 3px rgba(64, 158, 255, 0.1);
  }
}

:deep(.el-table) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

  .el-table__header-wrapper {
    th {
      background-color: #f5f7fa;
      color: #606266;
      font-weight: 600;
      height: 50px;
    }
  }

  .el-table__row {
    transition: all 0.3s ease;

    &:hover {
      background-color: #f5f7fa;
    }

    td {
      padding: 16px 0;
    }
  }
}

.operation-buttons {
  display: flex;
  gap: 8px;
}

:deep(.el-button) {
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:not(.el-button--primary):not(.el-button--danger) {
    background: #f5f7fa;
    border-color: #dcdfe6;
    color: #606266;

    &:hover {
      color: #409EFF;
      border-color: #409EFF;
      background-color: #ecf5ff;
    }
  }

  &.el-button--primary {
    background: linear-gradient(135deg, #409EFF 0%, #67C23A 100%);
    border: none;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    }
  }

  &.el-button--danger {
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
    }
  }
}

.el-dialog {
  border-radius: 16px;
  overflow: hidden;

  .el-dialog__header {
    margin: 0;
    padding: 20px 24px;
    background: #f5f7fa;
    border-bottom: 1px solid #e4e7ed;
  }

  .el-dialog__body {
    padding: 24px;
  }

  .dialog-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e4e7ed;
  }
}

.score-input {
  width: 100%;
  max-width: 200px;
}

.remark-input {
  margin-top: 16px;
}
</style>